<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<script th:src="@{/js/login.js}" charset="UTF-8"></script>
	<title>商品详情</title>
</head>
<body>
	<!-- 顶部tab -->
	<div th:replace="fragments/common::top-tab"></div>
	<!-- 搜索栏 -->
	<div th:replace="fragments/common::search-bar"></div>
	<!-- 内页导航栏 -->
	<div class="top-nav bg3">
		<div class="nav-box inner">
			<div class="all-cat">
				<div class="title"></div>
			</div>
			<ul class="nva-list">
				<a th:href="@{/}"><li class="active">首页</li></a>
				<a th:href="@{/getHotZone}" ><li>热卖专区</li></a>
				<a th:href="@{/getFullReductionZone}"><li>满减专区</li></a>
				<a th:href="@{/getDiscountZone}"><li>折扣专区</li></a>
			</ul>
		</div>
	</div>
	<div class="content inner">
		<section class="item-show__div item-show__head clearfix">
			<div class="pull-left">
				<ol class="breadcrumb">
					<li><a th:href="@{/}">首页</a></li>
					<li><a th:href="@{/product/getProductListPage(id=${categoryId})}" th:text="${categoryName}"></a></li>
					<li class="active" th:text="${product.getName().substring(0,T(java.lang.Math).min(30,product.getName().length()))}"></li>
				</ol>
				<div class="item-pic__box" id="magnifier">
					<div class="small-box">
						<img class="cover" th:src="${product.getMainImage()}" th:alt="${product.name}">
						<span class="hover"></span>
					</div>

				</div>
				<script th:src="@{/js/jquery.magnifier.js}"></script>
				<script>
					$(function () {
						$('#magnifier').magnifier();
					});
				</script>
				<div class="item-info__box">
					<div class="item-title">
						<div class="name ep2" th:text="${product.name}"></div>
<!--						<div class="sale cr">优惠活动：该商品享受8折优惠</div>-->
					</div>
					<div class="item-price bgf5">
						<div class="price-box clearfix">
							<div class="price-panel pull-left">
								售价：<span class="price" th:text="'￥'+${product.getPrice}"><s class="fz16 c9" th:text="'￥'+${product.getPrice*1.3}"></s></span>
							</div>
							<div class="vip-price-panel pull-right link" id="collect_id">
								收藏商品
							</div>
						</div>
<!--						<div class="c6">普通会员限购 2 件，想要<u class="cr"><a href="">购买更多</a></u>？</div>-->
					</div>
					<ul class="item-ind-panel clearfix">
						<li class="item-ind-item">
<!--							<span class="ind-label c9">累计销量</span>-->
							<span class="ind-count cr">品牌正品</span>
						</li>
						<li class="item-ind-item">
<!--							<a href=""><span class="ind-label c9">累计评论</span>-->
							<span class="ind-count cr">信誉认证</span></a>
						</li>
						<li class="item-ind-item">
<!--							<a href=""><span class="ind-label c9">赠送积分</span>-->
							<span class="ind-count cg">人工质检</span></a>
						</li>
					</ul>
					<div class="item-key">
						<div class="item-amount clearfix bgf5" style="margin-top: 50px">
							<div class="item-metatit">数量：</div>
							<div class="amount-box">
								<div class="amount-widget">
									<input readonly class="amount-input" id="buy_number" value="1" maxlength="8" title="请输入购买量" type="text">
									<div class="amount-btn">
										<a class="amount-but add"></a>
										<a class="amount-but sub"></a>
									</div>
								</div>
								<div class="item-stock"><span style="margin-left: 10px;">库存 <b id="Stock" th:text="${product.stock}"></b> 件</span></div>
								<script>
									$(function () {
										$('.amount-input').onlyReg({reg: /[^0-9]/g});
										var stock = parseInt($('#Stock').html());
										$('.amount-widget').on('click','.amount-but',function() {
											var num = parseInt($('.amount-input').val());
											if (!num) num = 0;
											if ($(this).hasClass('add')) {
												if (num > stock - 1){
													return DJMask.open({
													　　width:"300px",
													　　height:"100px",
													　　content:"您输入的数量超过库存上限"
												　　});
												}
												$('.amount-input').val(num + 1);
											} else if ($(this).hasClass('sub')) {
												if (num == 1){
													return ;
												}
												$('.amount-input').val(num - 1);
											}
										});
									});
								</script>
							</div>
						</div>
						<div class="item-action clearfix bgf5">
<!--							<a href="javascript:;" id="confirm_buy" rel="nofollow" data-addfastbuy="true" title="立即购买" role="button" class="item-action__basket">立即购买</a>-->
							<a href="javascript:;" id="add_cart" rel="nofollow" data-addfastbuy="true" role="button" class="item-action__buy">
								<i class="iconfont icon-shopcart "></i> 加入购物车
							</a>
						</div>
					</div>
				</div>
			</div>

		</section>
		<section class="item-show__div item-show__body posr clearfix" style="margin-top: 100px">
			<div class="item-nav-tabs">
				<ul class="nav-tabs nav-pills clearfix" role="tablist" id="item-tabs">
					<li role="presentation" class="active"><a href="#detail" role="tab" data-toggle="tab" aria-controls="detail" aria-expanded="true">商品详情</a></li>
<!--					<li role="presentation"><a href="#evaluate" role="tab" data-toggle="tab" aria-controls="evaluate">累计评价 <span class="badge">1314</span></a></li>-->
					<li role="presentation"><a href="#service" role="tab" data-toggle="tab" aria-controls="service">售后服务</a></li>
				</ul>
			</div>
			<div class="pull-left">
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="detail" aria-labelledby="detail-tab">
						<div class="item-detail__info clearfix">
							<div class="record" th:text="|商品编号:${product.getId()}|"></div>
							<div class="record" th:text="|上架时间:${#dates.format(product.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')}|"></div>
						</div>
						<div class="rich-text" th:utext="${product.getDetail()}">
						</div>
					</div>

					<div role="tabpanel" class="tab-pane fade" id="service" aria-labelledby="service-tab">
						<!-- 富文本 -->
						<div class="service-content rich-text">
							<p>承蒙惠购 AOC 产品，谨致谢意！为了让您更好地使用本产品，武汉艾德蒙科技股份有限公司通过该产品随机附带的保修证向您做出下述维修服务承诺，并按照该服务的承诺向您提供维修服务。</p><p>这些服务承诺仅适用于2016年6月1日（含）之后销售的AOC品牌显示器标准品。</p><p>如果您选择购买了 AOC 显示器扩展功能模块或其它厂家电脑主机，其保修承诺请参见相应产品的保修卡。</p><p>所有承诺内容以产品附件的保修卡为准。</p><p><br></p><h3>一、全国联保</h3><p style="text-indent:2em">AOC 显示器实施全国范围联保，国家标准三包服务。无论您是在中国大陆 ( 不含香港、澳门、台湾地区) 何处购买并在大陆地区使用的显示器，出现三包范围内的故障时，可凭显示器的保修证正本和购机发票到 AOC 显示器维修网点或授权网点进行维修同时，也欢迎您关注官方微信服务号“AOC用户俱乐部”(微信号：aocdisplay)进行查询。</p><div style="text-align:center"></div><p><br></p><p>三包服务如下：</p><ol><li>商品自售出之日起 7 日内，出现《微型计算机商品性能故障表》中所列故障时，消费者可选择退货、换货或修理。</li><li>商品自售出之日起 15 日内，出现《微型计算机商品性能故障表》中所列故障时，消费者可选择换货或修理。</li><li>商品自售出之日起 1 年内，出现《微型计算机商品性能故障表》中所列故障时，消费者可选择修理。</li></ol><p>以下情况不在三包范围内：</p><ol><li>超过三包有效期。</li><li>无有效的三包凭证及发票。</li><li>发票上内容与商品实物标识不符或者涂改的。</li><li>未按产品使用说明书要求使用、维护、保养而造成损坏的（人为损坏）。</li><li>非 AOC 授权的修理者拆动造成损坏的（私自拆修）。</li><li>非 AOC 在中国大陆（不含香港、澳门、台湾地区）销售的商品。</li></ol><h3>二、显示器专享服务</h3><p><strong>1、LUVIA视界头等舱，VIP专享服务</strong></p><p style="text-indent:2em">AOC针对各省市地区采取指定商品销售，消费者购买指定销往该区域的LUVIA卢瓦尔显示器标准品，从发票开具之日起1年内，注册成为官方微信服务号“AOC用户俱乐部”(微信号：aocdisplay)产品会员，即可在当地享“LUVIA视界头等舱，VIP专享服务”。</p><div style="text-align:center"></div><p><br></p><p style="text-indent:2em">* 如客户未在发票开具之日起1年内注册AOC微信会员，则只享受国家三包服务。</p><p style="text-indent:2em">注册会员方式：1、关注“AOC用户俱乐部”微信公众号。2、点击“会员”→“注册会员”。3、填写个人真实信息并注册产品信息，即可成为AOC产品会员。</p><p style="text-indent:2em"><strong>3年免费上门更换</strong>：从发票开具之日起3年内，产品若发生《微型计算机商品性能故障表》所列性能故障，可免费更换不低于同型号同规格产品。（服务网点无法覆盖区域，全国区域免费邮寄，双向运费由AOC负担）</p><p style="text-indent:2em"><strong>一键快捷掌上服务：</strong>从注册成为“AOC用户俱乐部”会员之日起，可享在线贴身技术顾问有问必答、售后服务在线预约、服务网点在线查询等一键快捷掌上服务。（人工客服咨询在线时间：8:00-22:00）</p><p style="text-indent:2em"><strong>增值豪礼尊享服务：</strong>可参加“AOC用户俱乐部”有奖互动赢取豪礼。</p><p>注：<br>(1)如不能及时提供购机发票或发票记载不清、涂改、商品实物标示和发票内容不符，将以您上传“AOC用户俱乐部”的发票信息为准计算保修时间；如果发票信息并未上传，将以该显示器制造日期(制造日期见显示器后壳条形码标签)加一个月为准计算保修时间。<br>(2)非“AOC用户俱乐部”产品会员，不享受“LUVIA视界头等舱，VIP专享服务”。</p>
						</div>
					</div>
			    </div>
			</div>
			<script>
				$(document).ready(function(){
					$('#descCate').smartFloat(0);
					$('.dc-idsItem').click(function() {
						$(this).addClass('selected').siblings().removeClass('selected');
					});
					$('#item-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
						$('#descCate #' + $(e.target).attr('aria-controls') + '-tab')
						.addClass('in').addClass('active').siblings()
						.removeClass('in').removeClass('active');
					});
				});
			</script>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div th:replace="fragments/common::right-menu"></div>
	<!-- 底部信息 -->
	<div th:replace="fragments/common::bottom-bar"></div>

	<div id="loginForm" class="login_form fr" style="display: none;position: absolute; left: 5%;right: 5%">
		<div class="form-box login">
			<div class="tabs-nav">
				<h2 id="login_title">请先登录</h2>
			</div>
			<div class="tabs_container">
				<form class="tabs_form" th:action="@{/user/login}" method="post" id="login_form" οnsubmit="return false;">
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">
								<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
							</div>
							<input class="form-control" name="username" id="login_phone" required placeholder="账号"  autocomplete="off" type="text">
						</div>
					</div>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
							</div>
							<input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
							<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
						</div>
					</div>
					<div class="checkbox">
						<label>
							<input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
						</label>
						<a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
					</div>
					<!-- 错误信息 -->
					<div class="form-group">
						<div class="error_msg" id="login_error">
						</div>
					</div>
					<button onclick="submitForm()" class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">登录</button><br>
				</form>

			</div>
		</div>
	</div>
</body>
<script th:inline="javascript">
var hasLogin=false;
var ifCollect=false;
var productId=[[${product.id}]];
//检查登录状态
$.post(
		[[${#request.getContextPath()}]]+'/user/checkUserLogin',
	function(result) {
		if (result.code == 0) {
			hasLogin=true;
			//检查是否收藏商品
			$.post(
					[[${#request.getContextPath()}]]+'/user/checkIfCollect',
					{'productId':productId},
				function(result) {
					if (result.code == 0) {
						ifCollect=true;
						var collect_id=$('#collect_id');
						collect_id.text("取消收藏");
					}
				},
				'json'
			);

		} else {
			hasLogin=false;
		}
	},
	'json'
);
$("#add_cart").click(function () {

	if (hasLogin) {
		//代表已经登录,直接插入购物车
		insertToCart();
	} else {
		layer.open({
			type: 1,
			title: '登录',
			area: ['380px', '480px'],
			content: $('#loginForm'),
			cancel: function () {
				location.reload();
			}
		});
	}
});
//收藏点击
$("#collect_id").click(function (){

	if (hasLogin) {
		if(ifCollect){
			//取消收藏
			console.log("取消收藏");
			$.post(
					[[${#request.getContextPath()}]]+'/user/cancelCollect',
					{'productId':productId},
					function(result) {
						if (result.code == 0) {
							var collect_id=$('#collect_id');
							collect_id.text("收藏商品");
							ifCollect=false;
							mylayer.okMsg(result.msg)
						} else {
							mylayer.errorMsg(result.msg);
						}
					},
					'json'
			);
		}else {
			//收藏
			$.post(
					[[${#request.getContextPath()}]]+'/user/collectProduct',
				{'productId':productId},
				function(result) {
					if (result.code == 0) {
						var collect_id=$('#collect_id');
						collect_id.text("取消收藏");
						ifCollect=true;
						mylayer.okMsg(result.msg);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				'json'
			);
		}

	} else {
		layer.open({
			type: 1,
			title: '登录',
			area: ['380px', '480px'],
			content: $('#loginForm'),
			cancel: function(){
				location.reload();
			}
		});
	}


})

//
// $("#confirm_buy").click(function (){
// 	insertToCart();
//
// 	setTimeout(function (){
// 		location.href=[[${#request.getContextPath()}]]+"/order/getOrderConfirmPage";
// 	},1000)
//
// })


function submitForm() {
	$.post(
			[[${#request.getContextPath()}]]+'/user/login',
		$('#login_form').serialize(),
		function(result) {
			if (result.code == 0) {
				$("#login_title").text("登录成功!");
				mylayer.okMsg(result.msg);
			} else {
				var error=$('#login_error');
				error.html(msgtemp('<strong>账号或密码错误</strong> 请重新输入','alert-warning'));
			}
		},
		'json'
	);
}

function insertToCart() {
	//console.log('insertToCart()');
	$.post(
			[[${#request.getContextPath()}]]+'/cart/add',
		{'productId':[[${product.id}]], 'quantity': $('#buy_number').val()},
		function(result) {
			if (result.code == 0) {
				mylayer.okMsg(result.msg);
				var stock = parseInt($('#Stock').html());
				var count=parseInt($('#buy_number').val());
				var stock=stock-count;
				$('#Stock').html(stock);
				var user = [[${session.user}]];
				if (user == null) {
					//console.log("User is not logged in");
				} else {
					//console.log("User is logged in:",user);
					$.post(
						[[${#request.getContextPath()}]]+'/cart/queryCount',
						function(result) {
							//console.log(result);
							$("#cart_num").empty();
							$("#cart_num").append('<i class="iconfont icon-shopcart cr fz16"></i> 购物车 '+result.num+' 件')
						},
						'json'
					);

				}
			} else {
				mylayer.errorMsg(result.msg);
			}
		},
		'json'
	);
}
$('.link').css("cursor", "pointer");
</script>
</html>